<template>
	<view>
		<u-navbar :background="background">
			<view class="ft_16 fw-b">
				确认订单
			</view>
		</u-navbar>
		<view class="content">
			<view class="con_1 card">
				<view class="display just_space" @click="selectAddress">
					<view class="" v-if="!addressInfo">
						请选择收货地址
					</view>
					<view class="" v-else> 
						<view class=" text_hidden1 ft_16 fw-b">
							{{addressInfo.addresss}}
						</view>
						<view class="p_top_10 c-999">
							<text class="p_right_10">{{addressInfo.name}}</text>
							<text>{{addressInfo.mobile}}</text>
						</view>
					</view>
					<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
				</view>
				<!-- <view class="" v-else>
					<view class="display just_space p_bottom_10" style="border-bottom: 1px solid #eeeeee;">
						<view class="">
							姓名
						</view>
						<view class="">
							<u-input type="text" v-model="username" placeholder="请填写收货人姓名" input-align="right"/>
						</view>
					</view>
					<view class="display just_space p_top_10" style="">
						<view class="">
							手机号码
						</view>
						<view class="">
							<u-input type="number" v-model="phone" placeholder="请填写收货手机号" input-align="right" maxlength="11"/>
						</view>
					</view>
				</view> -->
			</view>
			<view class="card con_2">
				<view class="shopinfo" v-for="(item,index) in shopList" :key="index">
					<view class="display">
						<view class="shopimg">
							<image :src="item.goods.image" mode="aspectFill"></image>
						</view>
						<view class="shoptext">
							<view class="">
								<view class="fw-b text_hidden2">{{item.goods.name}}</view>
								<view class="ft_12 c-999 p_top_10">
									{{item.goods.item_name}} ×{{item.goods.num}}
								</view>
							</view>
							<view class="ft_14 fw-b">
								<text class="ft_12">￥</text>
								<text class="ft_20">{{item.goods.market_price}}</text>
							</view>
						</view>
					</view>
					<view class="display just_space ft_12 con_2_info" style="padding: 25px 0 15px;">
						<view class="c-999">满减</view>
						<view class="" v-if="item.activity.title">
							{{item.activity.title}}
						</view>
						<view class="" v-else>暂无可用</view>
					</view>
				</view>
				
				<!-- <view class="display just_space ft_12 con_2_info">
					<view class="c-999">运费</view>
					<view class="">0</view>
				</view> -->
				<view class="display just_space ft_12 con_2_info" @click="show=true">
					<view class="c-999">优惠券</view>
					<view class="">{{youhuiquan}}</view>
				</view>
				<view class="" style="padding-top: 15px;text-align: right;">
					<text class="c-999 p_right_10">合计:</text>
					<text class="ft_12">￥</text>
					<text class="ft_20 fw-b">{{money}}</text>
				</view>
				
			</view>
			<view class="card con_3">
				<view class="ft_16 fw-b p_bottom_10">
					支付方式
				</view>
				<view class="pay_type">
					<u-radio-group v-model="value">
						<view class="display type" v-for="(item, index) in payList" :key="index" >
							<view class="display juzhong" >
								<image :src="item.img"></image>
								<view class="p_left_10">
									{{item.type}}
								</view>
							</view>
							<view class="">
								<u-radio @change="radioChange" :name="item.name" active-color="#ec9520"></u-radio>
							</view>
						</view>
					</u-radio-group>
				</view>
			</view>
			
			<view style="height: 150rpx;"></view>
			<view class="bottom_bar display just_space">
				<view class="c-red ft_18 fw-b p_left_10">
					￥{{money}}
				</view>
				<view class="submitBtn" @click="suborder">
					提交订单
				</view>
			</view>
			
		</view>
		
		<!-- 选择优惠券弹窗 -->
		<u-popup v-model="show" mode="bottom" border-radius="14" closeable height="1000rpx">
			<view class="youhuiPop">
				<view class="c-999 title">优惠券</view>
				<view class="">
					<view class="display just_space youhq" v-for="(item,index) in youhuiqList" :key="index">
						<view class="display">
							<view class="p_right_10" style="text-align: center;">
								<view class="fw-b price">
									<text>￥</text>
									<text class="ft_24">{{item.coupon_price}}</text>
								</view>
								<view class="ft_12" v-if="item.limit==0">无限制</view>
								<view class="ft_12" v-else>满{{item.price_cond}}可用</view>
							</view>
							<view class="" style="line-height: 1.6em;">
								<view class="ft_16 fw-b">{{item.coupon_title}}</view>
								<view class="ft_10 c-999">{{item.use_time}}</view>
								<view class="ft_12" v-if="item.limit==0">{{item.explain}}</view>
								<view class="ft_12" v-else>仅限{{item.category_name}}类商品</view>
							</view>
						</view>
						<u-radio-group v-model="value1">
							<u-radio active-color="#f69d37" :name="index" @change="radioChange1(item)"></u-radio>
						</u-radio-group>
					</view>
					<view class="display just_space youhq">
						<view class="display">
							不使用优惠券
						</view>
						<u-radio-group v-model="value1">
							<u-radio active-color="#f69d37" name="-1" @change="radioChange2"></u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
		</u-popup>
			
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{backgroundColor: '#ffffff',},
				addressInfo:'', //收货地址
				shopList:[],
				idlist:"",//购物车id
				
				show:false, //优惠活动弹窗
				youhuiquan:"请选择优惠券", //选择的优惠券
				youhuiqList:"",//优惠券列表
				value1:"-1", //默认选择优惠券
				coupon_id:"",//优惠券id
				money:"",//订单金额
				payList:[ //支付方式
					{
						img:"/static/order/pay/weixin.png",
						name:0,
						type:"微信支付"
					},
					// {
					// 	img:"/static/order/pay/zhifubao.png",
					// 	name:1,	
					// 	type:"支付宝支付"
					// },
				],
				value:0, //默认支付方式
				
			}
		},
		onLoad(e) {
			uni.$on('address',res=>{ //选中地址信息
				console.log(res);
				this.addressInfo=res
			})
			console.log(e);
			if(e.idlist){
				this.idlist=e.idlist
			}
			this.getshopInfo('') //获取商品和地址信息
			this.getyhqInfo() //获取现有优惠券
		},
		methods: {
			getshopInfo(coupon_id){ //获取商品和地址信息
				this.$myRequest('order/cartConfirmOrder',{
					cart_id:this.idlist,
					address_id:'',
					coupon_id	:coupon_id, //优惠券id
				}).then(res=>{
					console.log(res.data);
					let data=res.data.data
					if(res.data.code==1){
						if(data.address){
							let address=data.address
							address.addresss=address.province_name+address.city_name+address.area_name+address.address
							this.addressInfo=data.address
						}
						
						if(data.coupon.coupon_title){
							this.youhuiquan=data.coupon.coupon_title
						}
						data.info.forEach(i=>{
							i.goods=Object.assign(i.goods,i.sku_product) //拼接
							i.goods.item_name=i.goods.item_name.replace(/;/g,' ') //去掉分号
						})
						this.shopList=data.info //商品信息
						this.money=data.money //总金额
					}
				})
			},
			getyhqInfo(){ //获取可用优惠券
				this.$myRequest('order/coupon_cart',{
					cart_id:this.idlist,
				}).then(res=>{
					console.log(res.data.data.coupon);
					this.youhuiqList=res.data.data.coupon
				})
			},
			radioChange1(item){ //选择优惠券
				console.log(item.id);
				this.coupon_id=item.id
				this.shopList=[] 
				this.getshopInfo(item.id,'') //获取商品和地址信息
			},
			radioChange2(e){ //不使用优惠券
				this.coupon_id=''
				this.shopList=[]
				this.getshopInfo('','') //获取商品和地址信息
			},
			
			radioChange(e) { //选择支付方式
				this.value=e
			},
			suborder(){ //购物车提交订单
				let dataInfo={
					cart_id:this.idlist, //商品id
					address_id:this.addressInfo.id, //地址id
					coupon_id:this.coupon_id, //优惠券id
				}
				console.log(dataInfo);
				this.$myRequest('order/cartOrderCreate',dataInfo)
				.then(res=>{
					this.$all.toast(res.data.msg)
					console.log(res.data);
					if(res.data.code==1){
						setTimeout(()=>{
							let order_no=res.data.data.order_no
							this.pay(order_no) //拉起支付
						},800)
					}
				})
			},
			pay(order_no){ //拉起支付
				console.log(order_no);
				let type=''
				// #ifndef MP-WEIXIN
				type=2
				// #endif
				this.$myRequest('order/pay',{
					order_no:order_no,type:type
				}).then(res=>{
					// console.log(res.data);
					if(res.data.code==1){
						let data=res.data.data.info
						wx.requestPayment({
							appId: data.appId,
							timeStamp:data.timeStamp,
							nonceStr: data.nonceStr,
							package: data.package,
							signType: data.signType,
							paySign: data.paySign,
							success(res) {
								wx.showToast({
									title:'支付成功！',
									icon:'success'
								})
								if(res.err_msg == "get_brand_wcpay_request:ok"){
									uni.reLaunch({ //支付成功
										url:"../pages/shop/paySuccess"
									})
								}
							},
							fail(res) { 
								wx.showToast({
									title:'支付失败！',
									icon:'none'
								})
							}
						})
					}else{
						this.$all.toast("拉起支付失败")
					}
					
				})
			},
			selectAddress(){ //选择地址
				uni.navigateTo({
					url:"../mine/shAddress?type="+0
				})
			},
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fafafa;
}

.content{
	padding-top: 10px;
	.card{
		padding: 15px;
		background-color: #FFFFFF;
		margin-bottom: 10px;
	}
	
	.con_2{
		.shopinfo{
			padding-bottom: 15px;
			.shopimg{
				width: 200rpx;height: 200rpx;margin-right: 10px;
				image{
					width: 200rpx;height: 200rpx;border-radius: 5px;
				}
			}
			.shoptext{
				display: flex;justify-content: space-between;flex-flow: column;height: 100px;
			}
		}
		.con_2_info{
			padding: 15px 0;border-bottom: 1px solid #eeeeee;
		}
		
	}
	.con_3{
		padding-bottom: 0;
		.pay_type{
			.type{
				padding-bottom: 30rpx;
				justify-content: space-between;
				width: 345px;
				image{
					width: 20px;height: 20px;
				}
			}
		}
	}
	.bottom_bar{
		height: 100rpx;width: 100%;background-color: #FFFFFF;position: fixed;bottom: 0;
		.submitBtn{
			width: 40%;height: 100rpx;line-height: 100rpx;color: #FFFFFF;text-align: center;background: linear-gradient(90deg, #F1A421 0%, #E4741F 100%);
		}
	}
	
}

.youhuiPop{
	padding: 15px;
	.title{
		padding: 20px 0;text-align: center;
	}
	.youhq{
		padding: 15px 20px;border: 1px solid #dedede;margin-bottom: 5px;
		.price{
			color: #F69D37;padding-bottom: 5px;
		}
		.shiyong{
			width: 75px;text-align: center;
			border: 1px solid #E67920;color: #E67920;padding: 5px 10px;border-radius: 30px;
		}
		.lingqu{
			width: 75px;text-align: center;
			background: linear-gradient(90deg, #F1A421 0%, #E4741F 100%);color: #ffffff;padding: 5px 10px;border-radius: 30px;
		}
	}
}

</style>
